﻿﻿<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<%
	String path = request.getContextPath();
%>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta content="" name="description" />
	<meta content="webthemez" name="author" />
	<script src="<%=path%>/assets/js/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="<%=path %>/mapfiles/mapapi.js"></script>
	<script>
	var map;
	function LocalMapType() {
	}
	LocalMapType.prototype.tileSize = new google.maps.Size(256, 256);
	LocalMapType.prototype.maxZoom = 12; //地图显示最大级别
	LocalMapType.prototype.minZoom = 8; //地图显示最小级别
	LocalMapType.prototype.name = "本地地图";
	LocalMapType.prototype.alt = "显示本地地图数据";
	LocalMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
		var img = ownerDocument.createElement("img");
		img.style.width = this.tileSize.width + "px";
		img.style.height = this.tileSize.height + "px";
		//地图存放路径
		var curSize = Math.pow(2,zoom);
		strURL = "http://115.47.155.3:8081/googlemaps/" + zoom + "/" + (coord.x % curSize )+ "/" + (coord.y % curSize)+ ".png";
		img.src = strURL;
		return img;
	};
	var localMapType = new LocalMapType();
	function initialize() {
		var myLatlng = new google.maps.LatLng(39.9, 116.4);
		var mapOptions = {
			zoom : 9,
			center : myLatlng,
			panControl : false,
			zoomControl : false,
			mapTypeControl : false,
			scaleControl : false,
			streetViewControl : false,
			overviewMapControl : false
		}

		map = new google.maps.Map(document.getElementById('map_canvas'),
				mapOptions);
		map.mapTypes.set('localMap', localMapType); //绑定本地地图类型
		map.setMapTypeId('localMap'); //指定显示本地地图
		map.setOptions({
			draggable : true
		});
		$.ajax({
			 type:"POST",
	         url: "<%=path %>/getPersonInfo?key=${personId}",
	         success: function(data,status,xhr){
	        	var dataRecordInfo=data.dataRecordInfo;
	        	var html='<div style="width:250px;overflow: hidden;"><div class="panel panel-default"><div class="panel-body">';
	        	if(dataRecordInfo.certificateFaceUrl!=''&&dataRecordInfo.certificateFaceUrl!=null){
		        	html+='<div class="text-center"><img src="<%=path %>/getPhoto?photoUrl='+dataRecordInfo.certificateFaceUrl+'"/></div>';
	        	}else{
		        	html+='<div class="text-center"><img src="<%=path %>/getPhoto?photoUrl='+dataRecordInfo.personFaceUrl+'"/></div>';
	        	}
	        	html+='</br>人员姓名：'+dataRecordInfo.personName;
	        	html+='</br>身份证号：'+dataRecordInfo.certificateCode;
	        	html+='</br>人员性别：'+dataRecordInfo.gender;
	        	html+='</br>人员民族：'+dataRecordInfo.nationality;
	        	html+='</br>出生日期：'+dataRecordInfo.birthday;
	        	html+='</br>身份证地址：'+dataRecordInfo.address;
	        	html+='</br>签发机关：'+dataRecordInfo.signOrganization;
	        	html+='</br>采集时间：'+dataRecordInfo.createDate+'<br />'+
					'纬度：'+parseFloat(dataRecordInfo.latitude).toFixed(6)+'</br>'+
					'经度：'+parseFloat(dataRecordInfo.longitud).toFixed(6)+'</div></div></div>';
	        	var image = '<%=path%>/mapfiles/images/user.png';
	        	var personLatLng = new google.maps.LatLng(dataRecordInfo.latitude, dataRecordInfo.longitud);
	        	createMarker(personLatLng, html, image)
	        	map.setCenter(personLatLng);
			 }
		})
		}
		function createMarker(latLng,html,image){
			var infowindow = new google.maps.InfoWindow({
	            content:html
	        });
			var marker = new google.maps.Marker({
		        position: latLng,
		        map: map,
		        title: '',
				icon: image
		    });
			google.maps.event.addListener(marker, 'click', function() {
				infowindow.open(map,marker);
		    });
		}
		google.maps.event.addDomListener(window, 'load', initialize);
	</script>
</head>

<body>
<div id="map_canvas" style="left:0;top:0;width:100%;height:100%;position:absolute;">
</div>
</body>
</html>